<template>
  <view>
    <el-table
      :data="data"
    >
      <template v-for="(v,i) in columns">
        <el-table-column 
          :key="i" 
          :prop="v.prop"
          :label="v.label||v.prop"
          :width="v.width"
        >
          <template slot-scope="scope">
            <!-- text edit -->
            <el-input 
              v-if="edit&&!v.disabled&&(v.type==='text'||!v.type)" 
              :size="size"
              :value="columnValue(v.prop, scope.row)" 
              @input="onChange($event, v.prop, scope.row, v)"
            >
              <view
                v-if="v.prefixIcon||v.prefixText"
                slot="prefix"
                class="el-input__icon"
                @click.stop="v.onPrefixClick&&v.onPrefixClick(scope.row, scope.$index, v)"
              >
                <i
                  v-if="v.prefixIcon"
                  :class="v.prefixIcon"
                />
                <text v-if="v.prefixText">
                  {{ v.prefixText }}
                </text>
              </view>
              <view
                v-if="v.suffixIcon||v.suffixText"
                slot="suffix"
                class="el-input__icon"
                @click.stop="v.onSuffixClick&&v.onSuffixClick(scope.row, scope.$index, v)"
              >
                <i
                  v-if="v.suffixIcon"
                  :class="v.suffixIcon"
                />
                <text v-if="v.suffixText">
                  {{ v.suffixText }}
                </text>
              </view>
            </el-input>
            <!-- number edit -->
            <el-input-number 
              v-else-if="edit&&!v.disabled&&(v.type==='number')" 
              :size="size"
              :precision="v.precision||0" 
              :step="v.step||1" 
              :max="columnProp(v, 'max', scope.row, scope.$index)"
              :min="columnProp(v, 'min', scope.row, scope.$index)"
              :value="columnValue(v.prop, scope.row)" 
              @input="onChange($event, v.prop, scope.row, v)"
            />
            <!-- date edit -->
            <el-date-picker
              v-else-if="edit&&!v.disabled&&(v.type==='date')" 
              :size="size"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :value="columnValue(v.prop, scope.row)" 
              @input="onChange($event, v.prop, scope.row, v)"
            />
            <!-- datetime edit -->
            <el-date-picker
              v-else-if="edit&&!v.disabled&&(v.type==='datetime')" 
              :size="size"
              type="datetime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              :value="columnValue(v.prop, scope.row)" 
              @input="onChange($event, v.prop, scope.row, v)"
            />
            <!-- select edit -->
            <el-select 
              v-else-if="edit&&!v.disabled&&v.type==='select'" 
              :size="size"
              :value="columnValue(v.prop, scope.row)" 
              @input="onChange($event, v.prop, scope.row, v)"
            >
              <el-option
                v-for="item in v.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- cascader edit -->
            <el-cascader 
              v-else-if="edit&&!v.disabled&&v.type==='cascader'" 
              :options="v.isLasy?undefined:v.options"
              :props="v.isLasy?{lazy: true, lazyLoad: (node, resolve)=>cascaderLazyLoad(v, node, resolve),checkStrictly:true,emitPath: false}:{value: v.valueKey||'id', label: v.nameKey||'name', checkStrictly: v.valuePath?false:true, emitPath: v.valuePath?true:false}"
              :value="columnValue(v.prop, scope.row)" 
              @change="onChange($event, v.prop, scope.row, v)"
            />
            <!-- op -->
            <view v-else-if="v.type==='op'">
              <el-button 
                v-for="(vv,ii) in v.btns"
                :key="ii"
                :type="'text'" 
                :size="size"
                @click.stop="vv.onClick&&vv.onClick(scope.row, scope.$index, v)"
              >
                {{ vv.title }}
              </el-button>
            </view>
            <!-- slot -->
            <slot
              v-else-if="v.type==='slot'"
              :name="v.name"
              :row="scope.row"
              :index="scope.$index"
            >
              ggg
            </slot>
            <!-- show -->
            <el-tag
              v-else-if="v.showTag" 
              :type="columnOption(v.prop, scope.row, v).tagType||'primary'"
              :size="size"
            >
              {{ columnValue(v.prop, scope.row, v) }}
            </el-tag>
            <view 
              v-else
              :class="v.lines?`x-line-${v.lines}`:''"
            >
              {{ columnValue(v.prop, scope.row, v) }}
            </view>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </view>
</template>

<script>
  let id = 0
  export default {
    props: {
      data: {
        type: Array,
        default: ()=>([]),
      },
      columns: {
        type: Array,
        default: ()=>([]),
      },
      edit: {
        type: Boolean,
        default: false,
      },
      size: {
        type: String,
        default: 'small',
      },
    },
    data() {
      return {
        
      };
    },
    computed: {
      columnValue() {
        return (props, row, item)=>{
          // if(props==='price') {
          //   console.log(3333,row&&row[props] )
          // }
          let value = row&&row[props]
          if(item&&item.showValue) {
            value = item.showValue(row, item)
          }else if(item&&item.options&&item.options.find) {
            let one = item.options.find(v=>v.value===value)
            value = one&&one.label
          }
          // if(props==='price') {
          //   console.log(3333,value )
          // }
          return value===undefined&&item?item.defaultValue:value
        }
      },
      columnOption() {
        return (props, row, item)=>{
          let value = row&&row[props]
          if(!item.options.find) {
            debugger
          }
          return item&&item.options&&item.options.find(v=>v.value===value)||{}
        }
      },
      columnProp() {
        return (item, key, row, index, defaultValue)=>{
          let ret = item&&item[key]
          if(typeof ret === 'function') {
            ret = ret(row, index)
          }
          return ret!==undefined?ret:defaultValue
        }
      },
    },
    methods: {
      onChange(value, props, row, column) {
        if(row) row[props] = value
        if(column.onChange) column.onChange(value, row, column)
        this.$emit('change', this.data, value, props, row)
      },
      cascaderLazyLoad(column, node, resolve) {
        // node:
        // {level:0}
        // return:
        // {
        //   value: ++id,
        //   label: `选项${id}`,
        //   leaf: level >= 2
        // }
        if(typeof column.options === 'function') {
          column.options(node, resolve, column)
        }else if(Array.isArray(column.options)){
          resolve([])
        }else {
          resolve([])
        }
        // const { level } = node;
        // setTimeout(() => {
        //   const nodes = Array.from({ length: level + 1 })
        //     .map(item => ({
        //       value: ++id,
        //       label: `选项${id}`,
        //       leaf: level >= 2
        //     }));
        //   // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        //   resolve(nodes);
        // }, 1000);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>